<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>QQ简易聊天框</title>
    <link rel="stylesheet" href="css/chat.css">
    <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<section id="chat">
    <div class="chatBody">

    </div>
    <div><img src="images/icon.jpg"></div>
    <textarea class="chatText"></textarea>
    <div class="btn"><span>关闭(C)</span><span id="send">发送(S)</span></div>
</section>

<script type="text/javascript">
    var uName=new Array("时尚伊人","六月奇迹","松松");
    $(function () {
        $("#send").click(function () {
            let chatText = $(".chatText").val();
            let n = Math.floor(Math.random() * uName.length);
            let str = '<dl><dt><img src="images/head0'+(n+1)+'.jpg"></dt>'+
                '<dd class="title">'+uName[n]+'</dd>'+
                '<dd class="text">'+chatText+'</dd></dl>';

            // $(".chatBody").html($(".chatBody").html()+str);
            // $(".chatBody").append(str);//追加到内部最后一个
            // $(".chatBody").prepend(str);//追加内部第一个
            $(".chatBody").before(str);//同辈节点之前
            $(".chatBody").after(str);//同辈节点之后
            $(".chatText").val("");
        })
    })

</script>
</body>
</html>